<html>
	<head>
            <meta charset="UTF-8">
            <style>
            #map {
                width: 100%;
                height: 90%;
                margin: 0 auto;
            }
            #focus {
                width: 100%;
                height: 100%;
                position: absolute;
                margin: 0 auto;
                z-index: 1;
            }
            </style>
            <script src="./webrtcstreamer.json"></script>
            <script type="module" src="./webrtc-streamer-element.js"></script>
            <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
            <script src="./htmlmapmarker.js"></script>
            <script type="module" src="webrtc-streamer-footer-element.js"></script>
    </head>
	<body>
       
       <div id="map"></div>
       <webrtc-streamer-footer></webrtc-streamer-footer>

       <script>
      fetch(webrtcConfig.url + "/api/getMediaList").then( r => r.json() ).then((response) => { 
         let mediaList = {}
         response.forEach( (media) => {
           if (media.position) {
              const position = media.position.split(',');
              mediaList[media.video] = new google.maps.LatLng(position[0], position[1]);
           }
         });

         const width = 64;
         const height = 48;
         const webrtcoptions = 'rtptransport=tcp&timeout=60';
         const mapOptions = {
           zoom: 2,
           center: new google.maps.LatLng(0,0)
         };
         const map = new google.maps.Map(document.getElementById("map"), mapOptions);

         let markerList = {};
         for (let [key, latlng] of Object.entries(mediaList))  {
              let marker = new HTMLMapMarker({
                latlng,
                map,
                html: `<webrtc-streamer id="${key}" url='{"video":"${key}"}' options='width=64&height=48&${webrtcoptions}' notitle width='100%' height='100%'></webrtc-streamer>`,
                width,
                height
              });      
              google.maps.event.addListener(marker, 'click', function() {
                const mapdiv = map.getDiv();

                let div = document.createElement("div");
                div.id = "focus";
                div.innerHTML = `<webrtc-streamer id="${key}-focus" url='{"video":"${key}"}' options='${webrtcoptions}' notitle width='100%' height='100%'></webrtc-streamer>`;
                div.onclick = function() {
                  mapdiv.removeChild(div);
                }
                mapdiv.appendChild(div);
              });
              markerList[key] = marker;     
         }
         
        map.addListener('zoom_changed', function() {
          let zoom = map.getZoom();
          for (let [key, marker] of Object.entries(markerList))  {
              const webrtc = document.getElementById(key);
              marker.setSize(`${width*zoom/4}`, `${height*zoom/4}`);    
            }
        });

        map.addListener('idle', function() {
            var bounds = map.getBounds();
            let zoom = map.getZoom();

            for (let [key, marker] of Object.entries(markerList))  {
              if(bounds.contains(marker.getPosition())===true) {
                marker.attach();
                marker.setSize(`${width*zoom/4}`, `${height*zoom/4}`);              
              } else {
                marker.detach();
              }
            }
        });

      });   
       </script>       
	</body>
</html>